<!-- 优惠券 -->
<template>
    <div class="page has-navbar has-tabbar coupon" v-tabbar-menu-index="0">
        <von-header theme="light">
            <span slot="title">优惠券</span>
        </von-header>
        
        <div class="page-content">
            <div class="tabs">
                <span @click.stop="filter('NORMAL')" :class="{active:filterType=='NORMAL'}" class="tab-item">未过期</span>
                <!-- <span @click.stop="filter('EXPIRED')" :class="{active:filterType=='EXPIRED'}" class="tab-item">已过期</span> -->
                <span @click.stop="filter('VERIFIED')" :class="{active:filterType=='VERIFIED'}" class="tab-item">已使用</span>
                <!-- <span @click.stop="filter('STOP')" :class="{active:filterType=='STOP'}" class="tab-item">已作废</span> -->
            </div>
            <scroll class="couponList"
                    :on-infinite="onInfinite">
                <item v-for="(item, index) in couponList" v-if="showCoupon(item)" :key="index" @click.native="onItemClick( item.id )" class="couponItem">
                    <div class="couponInner">
                         <div class="info clearfix">
                            <div class="img left">
                                <img :src="item.logoURL" v-if="item.logoURL">
                            </div>
                            <div class="text left">
                                <div class="title title1">
                                    <span class="type" v-text="item.title"></span>
                                </div>
                                <div class="title title2">
                                    <span class="coupon-type" v-text="couponType[item.type]"></span>
                                    <span class="product-name" v-text="item.productName"></span>
                                </div>
                                <div class="expire-days">
                                    <span>有效日期:</span>
                                    <!-- <span style="color:#e66a6a;">{{ item.endTime | numberToAllDate('')}}</span> -->
                                    <span style="color:#e66a6a;">{{item.beginTime | numberToAllDate('')+'~'}}{{item.endTime | numberToAllDate('')}}</span>
                                </div>
                            </div> 
                        </div>
                        <div class="use-rules">
                            <div v-text="'使用规则：'+item.notice"></div>
                        </div>
                    </div>
                </item>
                
                <div v-if="!haveMore" slot="infinite" class="text-center">没有更多数据</div>
            </scroll>
        </div>
        <div id="couponModalBox" class="modal-backdrop hide">
            <div class="modal-backdrop-bg"></div>
            <div class="modal-wrapper">
                <div id="couponModal" class="modal slide-in-up">
                    <div class="bar bar-header bar-dark">
                        <h1 class="title">优惠券详情</h1>
                        <button class="button button-icon icon ion-ios-close-empty" @click="traggleModal"></button>
                    </div>
                    <scroll class="page-content">
                        <item class="couponName">
                            <div class="name" v-text="couponObj.title"></div>
                            <div class="productName" v-text="'抵用商品：'+couponObj.productName"></div>
                        </item>
                        <item class="couponDetailItem">
                            <span>店铺名称：</span>
                            <span class="right" v-text="couponObj.storeName"></span>
                        </item>
                        <item class="couponDetailItem">
                            <span>店铺地址：</span>
                            <span class="right" v-text="couponObj.storeAddress"></span>
                        </item>
                        <item class="couponDetailItem">
                            <span>优惠券类型：</span>
                            <span class="right" v-text="couponType[couponObj.type]"></span>
                        </item>
                        <item class="couponDetailItem">
                            <span>有效期限：</span>
                            <!-- <span class="right">{{couponObj.endTime | numberToAllDate('')}}</span> -->
                            <span class="right">{{couponObj.beginTime | numberToAllDate('')+'~'}}{{couponObj.endTime | numberToAllDate('')}}</span>
                        </item>
                        <div class="useRules">
                            <div class="title">使用规则：</div>
                            <div class="content" v-text="couponObj.notice"></div>
                        </div>
                        <div class="qrcode-box">
                            <div class="QRcode" id="QRcode"></div>
                            <p v-text="couponObj.code" class="code"></p>
                        </div>
                        <!-- <div style="padding: 0 20px;">
                            <button @click="clickShareBtn" class="button button-energized button-block">分享</button>
                        </div> -->
                    </scroll>
                </div>
            </div>
            <div class="shareBg" @click="showShareBg=false" v-if="showShareBg"></div>
        </div>
    </div>
</template>
<script>
import {API_BASE_URL} from "./../../../../urlConfig/index";
export default {
    props: ['openId','returnUrl'],
    data(){
        return {
            filterType:"NORMAL",
            couponList: [], // 优惠券列表
            couponType: {
                'GET_ITEM_FREE': '商品抵用券'
            },
            couponObj: '',
            couponStatus: {
                "NORMAL":"正常",
                "CREATED":"已创建",
                "TAKEN":"已领取",
                "VERIFIED":"已核销",
                "EXPIRED":"已过期",
            },
            showShareBg: false, // 分享优惠券背景

            haveMore: true,

            pageSize: 20,
            curPage: 0,

            curId: '',
        }
    },
    methods: {
        filter(type){
            this.filterType = type;
            this.curPage = 0;
            this.getList();
        },
        showCoupon(item){
            // console.log("time:"+new Date(item.endTime).getTime());
            return new Date(item.endTime).getTime() >= new Date().getTime();
        },
        traggleModal: function () {
            document.getElementById('couponModal').className = 'modal slide-in-up';
            document.getElementById('couponModalBox').className = 'modal-backdrop hide';
            this.clearShare();
            // wx.showMenuItems({
            //     menuList: [
            //         'menuItem:share:timeline', // 分享到朋友圈
            //         'menuItem:share:appMessage', // 发送给朋友
            //         'menuItem:share:QZone', // 分享到 QQ 空间
            //         'menuItem:share:qq', // 分享到QQ
            //     ],
            //     success: function (res) {
                    
            //     },
            //     fail: function (res) {
                    
            //     }
            // });
        },
        onInfinite: function (done) {
            this.curPage++;
            this.$http.get( this.openId+'/coupon-instance/list?page='+this.curPage+'&size='+this.pageSize+'&storeId='+"&status="+this.filterType).then((res)=>{
                if ( !res.data.couponInstances[0] ) {
                    this.haveMore = false;
                    this.curPage--;
                    done();
                    return;
                }
                this.couponList = this.couponList.concat(res.data.couponInstances);
                done();
            }).catch(()=>{

            })
        },
        // clickShareBtn: function () {
        //     if ( this.couponObj.shareable ) {
        //         this.showShareBg = true;
        //         this.share();
        //     } else {
        //         $toast.show('该优惠券不能分享', 2000).then(() => {})
        //     }
        // },
        addCount(id,type){
            this.$http({
                url:API_BASE_URL+"wechat/add-count",
                method:"GET",
                params:{
                    id,
                    type
                }
            }).then(res=>{
                console.log("add");
            });
        },
        onItemClick: function ( couponId ) {
            this.curId = couponId;
            this.$http.get(couponId+'/coupon-instance').then((res)=>{
                this.couponObj = res.data;
                document.getElementById('QRcode').innerHTML='';
                let qrcode = new QRCode("QRcode", {
                    text: res.data.code,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                });
                if ( this.couponObj.shareable ) {
                    this.showShareBg = true;
                    this.share();
                } 
                // if ( this.couponObj.shareable ) {
                //     this.share();
                // } else {
                //     wx.hideMenuItems({
                //         menuList: [
                //             'menuItem:share:timeline', // 分享到朋友圈
                //             'menuItem:share:appMessage', // 发送给朋友
                //             'menuItem:share:QZone', // 分享到 QQ 空间
                //             'menuItem:share:qq', // 分享到QQ
                //         ],
                //         success: function (res) {
                            
                //         },
                //         fail: function (res) {
                            
                //         }
                //     });
                // }
                document.getElementById('couponModalBox').className = 'modal-backdrop active';
                setTimeout(()=>{
                    document.getElementById('couponModal').className = 'modal slide-in-up ng-enter ng-enter-active active';
                },0)
            });
        },
        share(){
            let shareTitle = this.couponObj.title;
            let shareLink = API_BASE_URL+'wechat/member/share-coupon?id='+this.curId;
            let imgUrl = this.couponObj.logoURL;
            let notice = '使用规则：'+this.couponObj.notice;
            // console.log('可以分享')
            //分享到朋友圈
            let _this = this;
            wx.onMenuShareTimeline({
                title: shareTitle,
                link: shareLink,
                imgUrl: imgUrl,
                trigger: function (res) {

                },
                success: function (res) {
                    _this.showShareBg = false;
                    _this.addCount(_this.curId,"SHARE");
                    $toast.show('分享朋友圈成功', 2000).then(() => {});
                },
                cancel: function (res) {
                    _this.showShareBg = false;
                },
                fail: function (res) {
                    _this.showShareBg = false;
                    $toast.show('分享失败，请重新分享', 2000).then(() => {})
                }
            });
            //分享给朋友
            wx.onMenuShareAppMessage({
                title: shareTitle, // 分享标题
                desc: notice, // 分享描述
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    _this.showShareBg = false;
                    _this.addCount(_this.curId,"SHARE");
                    $toast.show('分享朋友成功', 2000).then(() => {})
                },
                cancel: function () { 
                    _this.showShareBg = false;
                },
                fail: function (res) {
                    _this.showShareBg = false;
                    $toast.show('分享失败，请重新分享', 2000).then(() => {})
                }
            });
            // wx.onMenuShareQQ({
            //     title: shareTitle, // 分享标题
            //     desc: notice, // 分享描述
            //     link: shareLink, // 分享链接
            //     imgUrl: imgUrl, // 分享图标
            //     success: function () {
            //         $toast.show('分享成功', 2000).then(() => {})
            //     },
            //     cancel: function () {

            //     },
            //     fail: function (res) {
            //         $toast.show('分享失败，请重新分享', 2000).then(() => {})
            //     }
            // });
            // wx.onMenuShareQZone({
            //     title: shareTitle, // 分享标题
            //     desc: notice, // 分享描述
            //     link: shareLink, // 分享链接
            //     imgUrl: imgUrl, // 分享图标
            //     success: function () {
            //         // 用户确认分享后执行的回调函数
            //         $toast.show('分享成功', 2000).then(() => {})
            //     },
            //     cancel: function () {

            //     },
            //     fail: function (res) {
            //         $toast.show('分享失败，请重新分享', 2000).then(() => {})
            //     }
            // });
        },
        // 退出页面后，取消分享
        clearShare(){
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: '', // 分享标题
                link: 'https://membership.huoxingy.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                success: function () {

                },
                cancel: function () {
                    
                }
            });
            //分享给朋友
            wx.onMenuShareAppMessage({
                title: '火星捕手-会员中心', // 分享标题
                desc: '', // 分享描述
                link: 'https://membership.huoxingy.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {

                },
                cancel: function () { 

                }
            });
            // wx.onMenuShareQQ({
            //     title: '火星捕手-会员中心', // 分享标题
            //     desc: '', // 分享描述
            //     link: 'https://membership.huoxingy.com', // 分享链接
            //     imgUrl: '', // 分享图标
            //     success: function () {

            //     },
            //     cancel: function () {

            //     }
            // });
            // wx.onMenuShareQZone({
            //     title: '火星捕手-会员中心', // 分享标题
            //     desc: '', // 分享描述
            //     link: 'https://membership.huoxingy.com', // 分享链接
            //     imgUrl: '', // 分享图标
            //     success: function () {

            //     },
            //     cancel: function () {

            //     }
            // });
        },
        getList(){
            this.$http.get( this.openId+'/coupon-instance/list?page='+this.curPage+'&size='+this.pageSize+'&storeId='+"&status="+this.filterType).then((res)=>{
                this.couponList = res.data.couponInstances;
                if ( res.data.couponInstances.length < this.pageSize ) {
                    this.haveMore = false;
                }
            }).catch(()=>{

            })
        }
    },
    created: function () {
        this.getList();
        // this.$http.get( this.openId+'/coupon-instance/list?page='+this.curPage+'&size='+this.pageSize+'&storeId='+"&status="+this.filterType).then((res)=>{
        //     this.couponList = res.data.couponInstances;
        //     if ( res.data.couponInstances.length < this.pageSize ) {
        //         this.haveMore = false;
        //     }
        // }).catch(()=>{

        // })
    },
    mounted(){

    },
}
</script>

<style lang="scss" scoped>
	@import "coupon";
</style>
